import React, { useState } from 'react';
import { Modal, Form, Input, Button, message } from 'antd';
import { blackStudent, BlackStudentParams } from '@/utils/api/student/student';

interface BlackStudentProps {
    visible: boolean;
    onCancel: () => void;
    onSuccess: () => void;
    studentId: number;
    studentName: string;
    groupId?: number;
}

const BlackStudent: React.FC<BlackStudentProps> = ({
                                                       visible,
                                                       onCancel,
                                                       onSuccess,
                                                       studentId,
                                                       groupId,
                                                       studentName
                                                   }) => {
    const [form] = Form.useForm();
    const [loading, setLoading] = useState(false);

    const handleSubmit = async () => {
        try {
            const values = await form.validateFields();

            Modal.confirm({
                title: '确认拉黑学生',
                content: `您确定要拉黑学生${studentName}吗？`,
                okText: '确认拉黑',
                okType: 'primary',
                cancelText: '取消',
                onOk: async () => {
                    setLoading(true);

                    // 构建请求参数
                    const params: BlackStudentParams = {
                        studentId,
                        reason: values.reason
                    };

                    // 如果有groupId，添加到查询参数中
                    if (groupId) {
                        params.groupId = groupId;
                    }

                    try {
                        const response = await blackStudent(params);

                        if (response.code === 200) {
                            message.success('拉黑成功');
                            onSuccess();
                            onCancel();
                        }
                    } catch (error) {
                        console.error('拉黑失败:', error);
                    } finally {
                        setLoading(false);
                    }
                }
            });
        } catch (error) {
            console.error('表单验证失败:', error);
        }
    };

    // 清空表单
    const handleAfterClose = () => {
        form.resetFields();
    };

    return (
        <Modal
            title={`拉黑学生 - ${studentName}`}
            open={visible}
            onCancel={onCancel}
            afterClose={handleAfterClose}
            footer={[
                <Button key="cancel" onClick={onCancel}>
                    取消
                </Button>,
                <Button
                    key="submit"
                    type="primary"
                    loading={loading}
                    onClick={handleSubmit}
                >
                    确认拉黑
                </Button>,
            ]}
            width={500}
        >
            <Form
                form={form}
                layout="vertical"
            >
                <Form.Item
                    name="reason"
                    label="拉黑原因"
                    rules={[{ required: true, message: '请输入拉黑原因' }]}
                >
                    <Input.TextArea
                        rows={4}
                        placeholder="请输入拉黑原因"
                        maxLength={500}
                        showCount
                    />
                </Form.Item>
            </Form>
        </Modal>
    );
};

export default BlackStudent;